<template>
	<view class="container">
		
		<!-- #ifdef H5 -->
		<view class="body_login">
			<uni-forms :modelValue="formData" ref="form">
				<view class="froms_input_box">
					<view class="froms_input">
						<view class="tex">
							<uni-icons type="plusempty" size="12"></uni-icons>tel <uni-icons type="down" size="16"></uni-icons>
						</view>
						<uni-easyinput :inputBorder="false" v-model="formData.phone" type="number"
							placeholder="请输入电话号码" />
					</view>
				</view>
				<view class="froms_input_box">
					<view class="froms_input">
						<uni-easyinput readonly :inputBorder="false" v-model="disableCode" type="text"
							placeholder="请输入验证码" />

					</view>
					<view v-if="yzmFlag" class="tex" >
						{{djs}}
					</view>
					<view v-else class="tex" @click="codeShow">
						获取验证码
					</view>
				</view>

			</uni-forms>
			<button :disabled="disableBtn" class="button" @click="submitMobile">登录</button>
			
			<!-- <button class="button" style="margin-top: 30rpx;" @click="testSubmit()">微信授权登录</button> -->
		</view>

		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="body_login">
			<button class="button" @click="submit()">微信授权登录</button>
		</view>
		<!-- <view class="footer_login">
			<uni-icons type="weixin" size="26" @click="submit"></uni-icons>
		</view> -->
		<!-- #endif -->


		<!-- disableCode -->
		<captchaVue :showCode="showCode" @completeCaptcha="completeCaptcha"></captchaVue>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watch,
		defineEmits,
		getCurrentInstance
	} from 'vue'

	import {
		onShow
	} from "@dcloudio/uni-app"
	// 验证码
	import captchaVue from '../../components/captcha/captcha.vue';
	// import {
	// 	loginrequest
	// } from "@/utils/request.js"
	// 接口
	import {
		wxLogin,
		getWx
	} from "@/api/index.js"
	import {
		getOpenId,
		doWxLogin,
		sendSms,
		mobilelogin
	} from "@/api/user.js"
	import {
		debounce
	} from "@/utils/debounce.js"
	// 引入 pinia
	import {
		useUserStore
	} from '@/stores/user';
	// 引入本地存储
	import * as S from "@/utils/storage.js"
	// 引入缓存的hooks
	import { useStorage } from '../../hooks/useStorage';
	const storage = useStorage()
	const userStore = useUserStore()
	const yzmFlag =ref(false)
	const djs = ref(120)
	const swiperStyle = ref({})
	// 小程序距离顶部距离
	const iStatusBarHeight = ref("")
	const formData = reactive({
		phone: '',
		codes: ''
	})
	// 按钮禁用
	const disableBtn = ref(true)
	// 验证码显示
	const disableCode = ref("")
	// 验证码返回值
	const showCode = ref(false)

	onShow(() => {
		iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		if (uni.getSystemInfoSync().statusBarHeight > 0) {
			swiperStyle.value.width = '75%'
			swiperStyle.value.paddingTop = iStatusBarHeight.value + 'px'
		} else {
			swiperStyle.value.paddingTop = '20rpx'
		}
	})
	// 监听是否解开禁用
	watch(() => [formData.phone, disableCode.value], (newData) => {
		console.log(newData)
		if (newData[0] && newData[1]) {
			disableBtn.value = false
		} else {
			disableBtn.value = true
		}
	})
	// 点击显示验证码界面
	function codeShow() {
		console.log(showCode.value,"zoule")
		showCode.value = true
		// disableCode.value = !disableCode.value
		// console.log(disableCode, 'disableCode')
	}

	function completeCaptcha(res) {
		console.log(res,126)
		showCode.value = false
		disableCode.value = res
		if(res){
			yzmFlag.value=true
			djs.value=120
			let inv = setInterval(()=>{
				djs.value--
				if(djs.value<1){
					clearInterval(inv)
					yzmFlag.value=false
				}
			},1000)
			// 调发送验证码的接口 
			sendSms({tel:formData.phone,event:'mobilelogin'}).then(e=>{
				uni.showToast({
					icon:'success',
					title:"发送成功!"
				})
			})
		}
	}




	function submit() {
		uni.showLoading({
			title: "登陆中..."
		})
		// #ifdef MP-WEIXIN
		console.log("123")
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				console.log(loginRes, 1311);
				// 获取用户信息
				uni.getUserInfo({
					provider: 'weixin',
					success: async (infoRes) => {
						// 获取openid
						try {
							let resOpen = await getOpenId({
								code: loginRes.code
							})
							// 进行登录 获取用户信息
							let userInfo = await doWxLogin({
								nickname: infoRes.userInfo.nickName,
								headerurl: infoRes.userInfo.avatarUrl,
								openid: resOpen.data.openid
							})
							console.log(userInfo, 142)
							// 存pinia
							userStore.userInfo = userInfo.data
							// 存本地存储 token 存本地存储
							S.setItem("userInfo", userInfo.data)
							storage.setCache("token",userInfo.data.token,4)

							uni.hideLoading()
							uni.showToast({
								title: "登录成功",
								success: () => {
									uni.navigateTo({
										url:"/pagesC/mine/mine"
									})
								}
							})
						} catch (err) {
							uni.hideLoading()
							uni.showToast({
								title: "登录失败 请稍后再试"
							})
						}

					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: "请先授权"
						})
					}
				});
			}
		});



		// #endif
		// #ifdef H5
			
			
		// #endif
	
	}
	
	const submitMobile = ()=>{
		uni.showLoading({
			title: "登陆中..."
		})
		mobilelogin({mobile:formData.phone,captcha:disableCode.value}).then(e=>{
			console.log(e,222)
			if(e.code==1){
				userStore.userInfo = e.data
				storage.setCache("token",e.data.token,4)
				// 存本地存储 token 存本地存储
				S.setItem("userInfo", e.data)
				uni.showToast({
					title: "登录成功",
					success: () => {
						uni.navigateTo({
							url:"/pagesC/mine/mine"
						})
					}
				})
			}else{
				uni.showToast({
					title: "登录失败",
				})
			}
			uni.hideLoading()
			
		})
	}
	
	
	const testSubmit=async ()=>{
		uni.showLoading({
			title:"登录中。。。"
		})
		let userInfo = await doWxLogin({
			nickname: "铭",
			headerurl: "http://api.9lele.com/public/uploads/20240513/2a543c8b3fbd2d86594144d36db78f7e.png",
			openid: "oRLIC1f_b2rlBcA5h8pJYrOxDb2A"
		})
		console.log(userInfo, 142)
		// 存pinia
		userStore.userInfo = userInfo.data
		// 存本地存储 token 存本地存储
		S.setItem("userInfo", userInfo.data)
		
		uni.hideLoading()
		uni.showToast({
			title: "登录成功",
			success: () => {
				uni.navigateTo({
					url:"/pagesC/mine/mine"
				})
			}
		})
	}
</script>
<style lang="scss">
	.container {
		background: #fff;
		display: flex;
		flex-direction: column;

		.header_login {
			display: flex;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;

			.images {
				width: 160rpx;
			}
		}

		.body_login {
			width: 90%;
			flex: 1;
			padding: 0 5%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 32rpx;

			.froms_input_box {
				display: flex;
				align-items: flex-end;
				margin-bottom: 40rpx;

				.tex {
					line-height: 60rpx;
				}

				.froms_input+.tex {
					padding-left: 20rpx;
				}

			}

			.froms_input {

				display: flex;
				flex: 1;
				border-bottom: 1px solid #F0F0F0;
			}

			.button {
				font-size: 32rpx;
				width: 100%;
				border: none;
			}

			uni-button:after {
				border: none;
			}

			button {
				border: none;
			}


		}

		.footer_login {
			text-align: center;
			height: 20%;
		}

	}
</style>
<style>

</style>